<template>
    <div class="w1400 header-wrap">
        <div class="logo">
            <router-link to="/"><span>AI 디지털교과서 통합지원센터</span></router-link>
        </div>
        <header>
            <nav>
                <ul class="clearfix">
                    <li @mouseenter="toggleSubMenu" @mouseleave="toggleSubMenu">통합지원센터 소개
                        <ul v-if="showSubMenu">
                            <li>통합지원센터란?</li>
                            <li>협력 기업</li>
                        </ul>
                    </li>
                    <!-- Add more menu items here -->
                </ul>
                <ul class="clearfix">
                    <li @mouseenter="expandHeader" @mouseleave="collapseHeader">자료실
                        <ul>
                            <li>기술문서</li>
                            <li>자료집</li>
                        </ul>
                    </li>
                    <!-- Add more menu items here -->
                </ul>
                <ul class="clearfix">
                    <li @mouseenter="expandHeader" @mouseleave="collapseHeader">내트워킹
                        <ul>
                            <li>기업 홍보관</li>
                        </ul>
                    </li>
                    <!-- Add more menu items here -->
                </ul>
                <ul class="clearfix">
                    <li @mouseenter="expandHeader" @mouseleave="collapseHeader">커뮤니티
                        <ul>
                            <li>공지사항</li>
                            <li>홍보/뉴스</li>
                        </ul>
                    </li>
                    <!-- Add more menu items here -->
                </ul>
                <ul class="clearfix">
                    <li @mouseenter="expandHeader" @mouseleave="collapseHeader">마이페이지
                        <ul>
                            <li>내 정보 수정</li>
                            <li>매칭 관리</li>
                        </ul>
                    </li>
                    <!-- Add more menu items here -->
                </ul>
            </nav>
        </header>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showSubMenu: false,
        }
    },
    methods: {
        toggleSubMenu() {
            this.showSubMenu = !this.showSubMenu;
        },
    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Menu mounted');
    }
}
</script>

<style scoped>
.sub-menu {
    width: 100%;
}

header {
    display: flex
}


/*  폰트 적용 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

html {
    font-family: "Noto Sans KR", sans-serif;
}

/* 노말라이즈 */
body,
ul,
li,
h1 {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* 라이브러리 */
.con {
    margin: 0 auto;
}

.img-box>img {
    width: 100%;
    display: block;
}

.row::after {
    content: "";
    display: block;
    clear: both;
}

.cell {
    float: left;
    box-sizing: border-box;
}

.cell-right {
    float: right;
    box-sizing: border-box;
}

.margin-0-auto {
    margin: 0 auto;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.text-align-center {
    text-align: center;
}

.line-height-0-ch-only {
    line-height: 0;
}

.line-height-0-ch-only>* {
    line-height: normal;
}

.relative {
    position: relative;
}

.absolute-left {
    position: absolute;
    left: 0;
}

.absolute-right {
    position: absolute;
    right: 0;
}

.absolute-middle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.width-100p {
    width: 100%;
}

.table {
    display: table;
}

.table-cell {
    display: table-cell;
}

.vertical-align-top {
    vertical-align: top;
}

.vertical-align-middle {
    vertical-align: middle;
}

.vertical-align-bottom {
    vertical-align: bottom;
}

/* 커스텀 */

.con {
    width: 1180px;
}

.con-min-width {
    min-width: 1180px;
}

/* 반응형 레이아웃 */
/*
.con {
    max-width:1150px;
}

.con-min-width {
    min-width:320px;
}

html, body {
    overflow-x:hidden;
}
*/

body {
    background: rgb(255, 255, 255);
}

header {

    /* border: 1px solid red; */
    /* background: -webkit-linear-gradient(rgb(255, 255, 255) 50px, rgb(255, 255, 255) 50px); */
    transition: 0.3s ease-in;
    height: 50px;
    /* overflow: hidden; */
}


nav {
    width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}

nav>ul>li {
    display: inline-block;
    /* float: lef/t;  */
    right: 0;

    line-height: 50px;
    margin-left: 40px;
    font-size: 1.4rem;
    /* position: relative; */
    font-family: "Pretendard-Regular";

}

nav>ul>li ul {
    width: 100%;
    opacity: 0;
    position: absolute;
    transition: 0.3s 0.2s;
}

nav>ul>li ul li {
    white-space: nowrap;
}

nav>ul>li:hover ul {
    opacity: 1;
    transition: 0.3s 0.2s;
    z-index: 1;
    background-color: white;

}
</style>